.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  .loading-content {
    text-align: center;
    .desc {
      line-height: 20px;
      font-size: 14px;
      color: #333;
    }
    .dot {
      position: relative;
      box-sizing: border-box;
      display: inline-block;
      width: 32px;
      height: 32px;
      font-size: 32px;
      transform: rotate(45deg);
      animation: animationRotate 1.2s infinite linear;
      i {
        position: absolute;
        display: block;
        width: 14px;
        height: 14px;
        background-color: #1890ff;
        border-radius: 100%;
        opacity: 0.3;
        transform: scale(0.75);
        transform-origin: 50% 50%;
        animation: animationMove 1s infinite linear alternate;
        &:nth-child(1) {
          top: 0;
          left: 0;
        }
        &:nth-child(2) {
          top: 0;
          right: 0;
          animation-delay: 0.4s;
        }
        &:nth-child(3) {
          right: 0;
          bottom: 0;
          animation-delay: 0.8s;
        }
        &:nth-child(4) {
          bottom: 0;
          left: 0;
          animation-delay: 1.2s;
        }
      }
    }
  }
}

@keyframes animationRotate {
  to {
    transform: rotate(405deg);
  }
}
@keyframes animationMove {
  to {
    opacity: 1;
  }
}